<template>
	<view style="padding-top: 40rpx;">
		<u-navbar back-text="" back-icon-color="#FFFFFF" :title="title" :border-bottom="false" title-color="#FFFFFF"
			:background="background"></u-navbar>
		<view class="content">
			<view class="title">
				<image src="../static/invitation_tb8.png" mode=""></image>
			</view>
			<view class="mian">
				<image src="../static/invitation_tb10.png" mode=""></image>
				面对面邀请
			</view>
			<view class="text">
				出示二维码,好友扫一扫
			</view>
			<view class="code" :style="'background-image: url('+ewm+');'">
				<image :src="getHead(image)" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				title: "面对面邀请",
				ewm: '',
			}
		},
		onLoad(option) {
			than = this;
		},
		onReady: function(e) {
			than.post("api/center/qrOfinvite", null, function(data) {
				than.ewm = data.invite_picture
				than.image = data.image
			})
		},
		methods: {

		}
	}
</script>

<style lang="less">
	page {
		background: #3476FE;
	}

	.content {
		margin: 0 36rpx;
		background: #FFFFFF;
		height: 950rpx;
		border-radius: 10rpx;

		.title {
			background-image: url(../static/invitation_tb9.png);
			background-size: 100% 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 182rpx;
				height: 37rpx;
			}
		}

		.mian {
			height: 130rpx;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			border-bottom: 2rpx solid #EEEEEE;
			margin: 0 24rpx;

			image {
				margin-right: 17rpx;
				width: 36rpx;
				height: 36rpx;
			}
		}

		.text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			height: 143rpx;
			margin-top: 33rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.code {
			margin: auto;
			width: 418rpx;
			height: 419rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-size: 100% 100%;

			image {
				width: 95rpx;
				height: 95rpx;
			}
		}
	}
</style>
